<template>


  <!-- <el-drawer v-model="drawer" title="Word Definition" :with-header="true" size="20%" class="custom-drawer" style=" color: var(--btn-text);background: linear-gradient(var(--bg-color-deg), var(--bg-color-change1), var(--bg-color-change2), var(--bg-color-change3));
  background-size: 400% 400%;">
    <div v-if="loading">🔄 正在加载...</div>
    <div v-else-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div v-else-if="result">
      <h2>{{ result.word }}</h2>
      <p v-if="phonetic">🔊 音标: {{ phonetic }}</p>

      <div v-for="(meaning, index) in result.meanings" :key="index">
        <h3>{{ meaning.partOfSpeech }}</h3>
        <ul>
          <li v-for="(definition, idx) in meaning.definitions" :key="idx">
            <p>📖 {{ definition.definition }}</p>
            <p v-if="definition.example">💡 示例: "{{ definition.example }}"</p>
          </li>
        </ul>
        <p v-if="meaning.synonyms.length">🔹 同义词: {{ meaning.synonyms.join(", ") }}</p>
        <p v-if="meaning.antonyms.length">🔸 反义词: {{ meaning.antonyms.join(", ") }}</p>
      </div>

      <audio v-if="audio" :src="audio" controls></audio>

      <div class="source-links">
        <h4>🔗 参考资料:</h4>
        <ul>
          <li v-for="(link, i) in result.sourceUrls" :key="i">
            <a :href="link" target="_blank">{{ link }}</a>
          </li>
        </ul>
      </div>
    </div>
  </el-drawer> -->
  <div class="sign-in">
    <button>
      <RouterLink style=" all: unset;" to="/Login">sign in</RouterLink>
    </button>
  </div>
  <div class="container">

    <div style="height: 10vh;"><button @click="setTheme('light')">亮色主题</button>
      <button @click="setTheme('dark')">暗色主题</button>
      <button @click="setTheme('blue')">蓝色主题</button>
    </div>
    <div class="introduction">
      <div class="introduction-top">
        <div class="intro-text">
          <!-- -->
          <!-- <h1>Introduction to Our Vocabulary Learning App</h1>
          <p>Our intelligent vocabulary learning app is a highly efficient and personalized tool designed for students,
            professionals, and language learners. Using Ebbinghaus' forgetting curve, AI adaptive learning, and
            immersive
            memorization techniques, it helps users expand their vocabulary effortlessly and effectively.</p> -->
          <h1>
            <span v-for="(word, index) in words.intro.title" :key="index" class="clickable-word"
              @click="openDrawer(word)" :class="{ 'selected-word': selectedWord === word }">&nbsp;{{ word }}&nbsp;
            </span>
          </h1>
          <!-- <p>Our intelligent vocabulary learning app is a highly efficient and personalized tool designed for students,
            professionals, and language learners. Using Ebbinghaus' forgetting curve, AI adaptive learning, and
            immersive
            memorization techniques, it helps users expand their vocabulary effortlessly and effectively.</p> -->
          <p>
            <span v-for="(word, index) in words.intro.text" :key="index" class="clickable-word"
              @click="openDrawer(word)" :class="{ 'selected-word': selectedWord === word }">&nbsp;{{ word }}&nbsp;
            </span>
          </p>
        </div>
        <div class="intro-image">
          <img src="https://picsum.photos/500/300" alt="">
        </div>
      </div>
      <div class="introduction-bottom">
        <div class="bounce-icon">
          <p>More</p>
          <el-icon size="30">
            <ArrowDown />
          </el-icon>
        </div>

      </div>
    </div>
    <div :ref="targetElements[0]" class="advantages">
      <transition name="fade">
        <div v-if="IstargetElement.isShowList[0]" class="advantages_content">

          <h1>
            Advantages of Our App
          </h1>
          <p>Smart Memory Algorithm – Based on Ebbinghaus’ forgetting curve, it schedules review sessions for optimal
            retention.</p>
          <ul class="advantages-content-list">
            <li v-for="(item, index) in advantagesListDitails" :key="index">
              <h1>{{ item.name }}</h1>
              <p>{{ item.description }}</p>
            </li>
          </ul>
        </div>
      </transition>
    </div>
    <div :ref="targetElements[1]" class="causes">
      <transition name="fade">
        <div v-if="IstargetElement.isShowList[1]" class="causes-content">
          <h1 class="section-title">Why Choose Us?</h1>
          <div class="features-container">
            <div v-for="(item, index) in featuresList" :key="index" class="feature-card">
              <div class="icon-container">
                <component :is="item.icon" />
              </div>
              <h2>{{ item.title }}</h2>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div :ref="targetElements[2]" class="vision-goals">
      <transition name="fade">
        <div v-if="IstargetElement.isShowList[2]" class="vision-goals-content">
          <h1 class="section-title">Our Vision & Goals</h1>
          <ul class="goals-list">
            <li v-for="(goal, index) in goalsList" :key="index">
              <el-icon :size="24" class="icon">
                <StarFilled />
              </el-icon>
              <span>{{ goal }}</span>
            </li>
          </ul>
          <p class="cta-text" style="margin-bottom: 20px;">Start your vocabulary learning journey today! 📚🚀</p>
        </div>
      </transition>
    </div>
  </div>
  <WordDrawer :key="selectedWord" :word="selectedWord" :show="showDrawer" />
</template>

<script setup>

import { ref, onMounted, reactive, nextTick } from "vue";
import axios from "axios";
import {
  CircleCheckFilled,
  UserFilled,
  Collection,
  Goods,
  StarFilled
} from "@element-plus/icons-vue";
import WordDrawer from "../../components/wordDrawer.vue";
const advantagesListDitails = ref([
  {
    "name": "Smart Memory Algorithm",
    "description": "Based on Ebbinghaus’ forgetting curve, it schedules review sessions for optimal retention."
  },
  {
    "name": "AI-Powered Personalized Learning",
    "description": "Adjusts study plans based on user progress and proficiency."
  },
  {
    "name": "Multiple Memorization Methods",
    "description": "Supports root-based learning, association techniques, image memory, and listening practice to cater to different learning styles."
  },
  {
    "name": "Offline Learning",
    "description": "Access your vocabulary list anytime, anywhere without an internet connection."
  },
  {
    "name": "Word Bank & Review Reminders",
    "description": "Save difficult words and receive timely review alerts."
  }
])


const featuresList = ref([
  { title: "Scientifically Effective", description: "AI-powered planning reduces redundant repetition, boosting efficiency.", icon: CircleCheckFilled },
  { title: "Personalized Learning Paths", description: "Tailored study plans based on individual needs and progress.", icon: UserFilled },
  { title: "Authoritative Word Bank", description: "Curated by language experts to ensure accuracy and reliability.", icon: Collection },
  { title: "User-Friendly Interface", description: "Simple and intuitive design, making it accessible to all age groups.", icon: Goods },
  { title: "Learning Community", description: "Join study challenges, leaderboards, and connect with global learners.", icon: StarFilled },
]);


const goalsList = ref([
  "🎯 Empower every learner to overcome language barriers and expand their vocabulary with ease.",
  "🎯 Create the most intelligent and enjoyable vocabulary learning tool to make memorization effortless.",
  "🎯 Continuously optimize the learning experience using AI and big data for maximum efficiency."
]);




const text = {
  intro: {
    title: "Introduction to Our Vocabulary Learning App",
    text: "Our intelligent vocabulary learning app is a highly efficient and personalized tool designed for students, professionals, and language learners. Using Ebbinghaus' forgetting curve, AI adaptive learning, and immersive memorization techniques, it helps users expand their vocabulary effortlessly and effectively."
  }
}

const words = reactive({
  intro: {
    title: text.intro.title.split(" "),
    text: text.intro.text.split(" ")
  }
})


// 拆分句子成单词数组
// const words = text.split(" ");

console.log(words, 'words');

const IstargetElement = reactive({
  isShowList: [false, false, false] // 3 个元素的可见状态
});

const targetElements = [ref(null), ref(null), ref(null)]; // 存放多个 ref

// const drawer = ref(false);
// const result = ref(null);
// const errorMessage = ref("");
// const audio = ref(null);
// const phonetic = ref("");
// const loading = ref(false);

// const fetchWordDefinition = async (word) => {
//   console.log("Clicked word:", word);
//   drawer.value = true;
//   errorMessage.value = "";
//   result.value = null;
//   audio.value = null;
//   phonetic.value = "";
//   loading.value = true;

//   try {
//     const response = await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
//     console.log("API response:", response.data);

//     const data = response.data[0];
//     result.value = data;
//     phonetic.value = data.phonetic || (data.phonetics[0]?.text ?? "");

//     // 获取发音链接
//     const sound = data.phonetics.find((p) => p.audio);
//     if (sound) {
//       audio.value = sound.audio;
//     }
//   } catch (error) {
//     console.error("Error fetching word:", error);
//     errorMessage.value = `❌ 未找到 ${word}，请检查拼写！`;
//   } finally {
//     loading.value = false;
//   }
// };
const selectedWord = ref("");
const showDrawer = ref(false);

const openDrawer = async (word) => {
  if (showDrawer.value) {
    showDrawer.value = false;
    await nextTick(); // 等待 DOM 更新，确保 Drawer 彻底关闭
  }

  selectedWord.value = word;
  setTimeout(() => {
    showDrawer.value = true;
  }, 10); // 短暂延迟，让 Vue 先处理关闭后再打开
};
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        const index = targetElements.findIndex(el => el.value === entry.target); // 获取正确索引
        if (entry.isIntersecting && index !== -1) {
          IstargetElement.isShowList[index] = true; // 只修改对应索引的元素
          console.log(`元素 ${index} 可见`);
        }
      });
    },
    { threshold: 0.5 }
  );

  targetElements.forEach((elementRef) => {
    if (elementRef.value) observer.observe(elementRef.value);
  });
});


import { inject } from "vue";

const theme = inject("theme");
const setTheme = (newTheme) => {
  theme.value = newTheme; // 更新全局主题
};
</script>

<style scoped lang="scss">
.error-message {
  color: red;
  font-weight: bold;
}

.source-links {
  margin-top: 10px;
}

.source-links a {
  // color: blue;
  text-decoration: underline;
}


.custom-drawer .el-drawer {}

.clickable-word {
  display: inline-block;
  /* 让 span 元素可以换行 */
  white-space: normal;
  /* 允许换行 */
  // margin-right: 5px;
  cursor: pointer;
}

button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  // background-color: var(--btn-bg);
  color: var(--btn-text);
  font-size: 1rem;
  border-radius: 5px;
  margin-top: 20px;
  transition: background 0.3s, color 0.3s;
  // opacity: 0;
  background: rgba($color: #000000, $alpha: 0);
}

button {
  padding: 12px 24px;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  // background: linear-gradient(45deg, #ff7eb3, #ff758c);
  // color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  // box-shadow: 0 4px 10px rgba(255, 117, 140, 0.3);
  outline: none;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-3px) scale(1.05);
    // background: linear-gradient(45deg, #ff758c, #ff7eb3);
    // box-shadow: 0 8px 15px rgba(255, 117, 140, 0.5);
  }

  &:active {
    transform: scale(0.95);
    box-shadow: 0 3px 8px rgba(255, 117, 140, 0.3);
  }

  // &::before {
  //   content: "";
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   width: 300%;
  //   height: 300%;
  //   background: rgba(255, 255, 255, 0.2);
  //   transition: all 0.6s ease-out;
  //   border-radius: 50%;
  //   transform: translate(-50%, -50%) scale(0);
  // }

  // &:hover::before {
  //   transform: translate(-50%, -50%) scale(1);
  //   opacity: 0;
  // }
}




.sign-in {
  position: fixed;
  top: 0px;
  right: 50px;
  z-index: 999;
  color: var(--btn-text);
  cursor: pointer;
  transition: all 0.3s ease-in-out;



}

.custom-drawer h2 {
  margin: 12px 0;
}

.custom-drawer h3 {
  margin: 10px 0;
}

.custom-drawer p {
  margin: 8px 0;
}

.custom-drawer ul {
  padding-left: 20px;
}

.custom-drawer .source-links {
  margin-top: 16px;

}

.selected-word {
  color: white;
  /* 选中后变白色 */
  background-color: #31455a;
  /* 选中后背景变蓝色 */
  border-radius: 5px;
  padding: 2px 5px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // height: 100%;
  width: 100%;
  color: var(--btn-text);
  background: linear-gradient(var(--bg-color-deg), var(--bg-color-change1), var(--bg-color-change2), var(--bg-color-change3));
  background-size: 400% 400%;
  animation: gradientAnimation 10s infinite alternate ease-in-out;
  transition: background 1s, color 1s;

  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }

  }

  .introduction {
    height: 90vh;
    width: 100%;
    // background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .introduction-top {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      width: 100%;
      height: 80%;

      .intro-text {
        width: 40%;
        padding: 5%;

        h1 {
          font-size: clamp(1rem, 5vw, 3rem);
        }

        p {
          font-size: clamp(0.5rem, 1vw, 1rem);
        }
      }

      .intro-image {
        width: 40%;

        img {
          width: 80%;
          object-fit: cover;
          border-radius: 10px;
        }
      }
    }

    .introduction-bottom {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .bounce-icon {
        animation: bounce 1.5s infinite ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        p {
          font-size: 30px;
          font-style: italic;
          /* 斜体 */
          font-weight: bold;
          /* 加粗 */
        }
      }

      @keyframes bounce {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-10px);
        }
      }
    }
  }

  .advantages {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 100px;
    height: 100vh;

    .advantages_content {
      width: 100%;

      // background-color: #ff4d00;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      h1 {
        font-size: clamp(1rem, 2vw, 5rem);
        text-align: center;
      }

      p {
        width: 70%;
        font-size: clamp(1rem, 1.5vw, 5rem);
        text-align: center;
      }

      .advantages-content-list {
        margin-top: 5vh;
        width: 50%;
        display: flex;
        justify-content: center;
        // align-items: center;
        flex-wrap: wrap;

        li {
          margin-bottom: 2vh;
          width: 23%;
          padding-left: 5%;
          padding-right: 5%;
          // background-color: #dbabab;

          h1 {
            font-size: clamp(0.5rem, 1vw, 1rem);
            text-align: left;
            margin-bottom: 2vh;
          }

          p {
            font-size: clamp(0.5rem, 1vw, 1rem);
            text-align: justify;
          }
        }
      }

    }
  }

  .causes {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    // padding: 5rem 2rem;
    width: 100%;
    height: 50vh;

    .causes-content {
      width: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .section-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 2rem;
      }

      .features-container {
        display: flex;

        width: 100%;

        align-items: center;
        justify-content: center;

        .feature-card {
          width: 20%;
          // background: rgba(207, 12, 12, 0.1);
          // padding: 1.5rem;
          border-radius: 10px;
          // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease-in-out;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          &:hover {
            cursor: pointer;
            transform: translateY(-10px);
          }

          .icon-container {
            width: 50%;
            // font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
            // display: flex;
            // justify-content: center;
          }

          h2 {
            font-size: 1.5rem;
            font-weight: bold;
          }

          p {
            font-size: 1rem;
            opacity: 0.8;
          }
        }
      }
    }

  }

  .vision-goals {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    // padding: 5rem 2rem;

    width: 100%;
    height: 50vh;

    .vision-goals-content {
      // max-width: 800px;
      padding: 5rem 5rem 0 5rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      width: 70%;
      // text-align: center;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .section-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 2rem;
      }

      .goals-list {
        list-style: none;
        padding: 0;

        li {
          display: flex;
          align-items: center;
          font-size: 1.2rem;
          margin-bottom: 1rem;
          gap: 10px;

          .icon {
            color: var(--primary-color);
          }
        }
      }

      .cta-text {
        margin-top: 2rem;
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--primary-color);
      }

    }


  }
}

.spacer {
  height: 100vh;
  /* 增加滚动距离 */
}

.red-box {
  width: 200px;
  height: 100px;
  background-color: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 10px;
  margin: 20px auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.8s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
